<template>
	<view class="empire-card__list">
		<EmpireImageVertical
			v-for="(item, key) in list"
			:key="key"
			:src="item.profile"
			:title="item.name"
			:to="{ path: '/pages/category/product-detail', query: { productId: item.serial } }"
		>
			<EmpirePrice :discount="item.discount" :price="item.price"></EmpirePrice>
			<template #description>
				<text>{{ item.description }}</text>
			</template>
		</EmpireImageVertical>
	</view>
</template>

<script setup>
import EmpireImageVertical from './empire-image/empire-image-vertical.vue';
import EmpirePrice from './empire-price.vue';
import { ref } from 'vue';

defineProps({
	list: {
		type: Array,
		default: []
	}
});
</script>

<style lang="scss" scoped>
.empire-card__list {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 30rpx;
}
</style>
